<template>
  <div class="page_video">
    <div style="width:700px; margin: 10px auto">
     
      <div>
        <video-player
          class="video-player-box"
          ref="videoPlayer"
          :options="playerOptions"
          :playsinline="true"
          customEventName="customstatechangedeventname"
          @play="onPlayerPlay($event)"
          @pause="onPlayerPause($event)"
          @statechanged="playerStateChanged($event)"
          @ready="playerReadied"
        >
        </video-player>

        <!--        <video width="320" height="240" controls autoplay>-->
        <!--          <source src="movie.mp4" type="video/mp4">-->
        <!--        </video>-->
      </div>
      <!-- <div style="margin-top: 10px">
        <i-button
          :type="getBtnType(video.id)"
          v-for="(video, index) in videoList"
          style="margin-right: 20px"
          @click="playThis(video.id)"
        >
          <Icon type="ios-play"></Icon>
          视频{{ index + 1
          }}<span v-if="video.id == curPlayId">(当前播放视频)</span>
        </i-button>
      </div> -->
    </div>
  </div>
</template>

<script>
import { getToken } from "@/libs/util";
import { videoPlayer } from "vue-video-player";
import VideoApi from "@/api/videoApi";
import "@/assets/video/video-js.css";
// import 'video.js/dist/video-js.css'
export default {
  // name: "page_video",
  components: {
    videoPlayer,
  },
  props:['videoList','curPlayId','playVideoUrl'],
  data() {
    return {
      playerOptions: {
        autoplay: "any",
        preload: "auto", // 自动加载
        controls: true,
        muted: true, // 是否静音
        width: 700,
        // height:200,
        language: "zh-CN", // 设置语言
        // loop: true,
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        sources: [
          {
            type: "video/mp4",
            src: '',
          }
        ],
        
        // poster: "/static/images/author.jpg",
      },
    };
  },
  computed: {
    player() {
      console.log("开始计算player播放器")
      return this.$refs.videoPlayer.player;
    },
  },
  watch:{
    playVideoUrl:function(val){
      console.log("监控到播放",val)
      if(val){
      this.playerOptions.sources = [
              {
                type: "video/mp4",
                src:val
              },
            ];
this.$refs.videoPlayer.player.play();
            }
    }
  },
  created(){
   console.log("开始渲染created")
  
  },
  mounted(){
    console.log("开始渲染mounted",this.playVideoUrl)
  
   
   
  },
  methods: {
    onPlayerPlay(player) {
      console.log("player play!", player);
    },
    onPlayerPause(player) {
      console.log("player pause!", player);
    },
    // or listen state event
    playerStateChanged(playerCurrentState) {
      console.log("player current update state", playerCurrentState);
    },
    playerReadied(player) {
      console.log("播放器准备就绪", player);
      // 如果不是播放状态，则自动播放
      const that = this;
      setTimeout(function () {
        that.$refs.videoPlayer.player.play();
        // player.play();
      }, 1000);
    },
    onPlayerEnded(player) {
      this.$Message.info(this.$t('common.playEndMsg'));
    },
   
    getBtnType(id) {
      if (id == this.curPlayId) {
        return "warning";
      }
      return "info";
    },
    playThis(id) {
      if (this.curPlayId == id) {
        console.log("相同的视频，不播")
        return;
      }
      this.$refs.videoPlayer.player.pause();
      this.playerOptions.sources = [
        {
          type: "video/mp4",
          src:this.playVideoUrl
        },
      ];
      this.curPlayId = id;
      this.$refs.videoPlayer.player.play();
    },
  },
};
</script>
<style>
html,
body {
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
  background: #f5f7f9;
}
</style>
